<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>路线计算</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/main/route_computed.css">
		<link rel="stylesheet" type="text/css" href="../css/animate.css">
		<script src="../js/mui.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aqY4rWHU4KtRiHnzWO8k0EzQ5ik4K6xv"></script>
		<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
		<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body style="height: 100%;">
		
		<div id="vuemain">
			<header class="mui-bar mui-bar-nav mui-bar-nav-bg bar">
				<a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-if="!showLast"></a>
				<a id="lastPage" class="mui-pull-right" v-if="showLast" @click="goLast()"><span class="next-btn">上一页</span></a>
				<span class="header-title">出行路线</span>
				<a id="nextPage" class="mui-pull-right" v-if="showNext" @click="goNext()"><span class="next-btn">下一页</span></a>
			</header>
			<div id="container">
				
			</div>
			<div class="showBtn" style="display: none;">
				<img src="../imgs/uparrow.png" alt="">
			</div>
			<div class="route_info">
				<div class="mui-slider" @slide="itemSlide">
					<div class="mui-slider-group" v-show="!showDetail">
						<!-- 显示订单信息 -->
						<div class="mui-slider-item" v-if="!bookOrder">
							<div class="mui-card routeInfo_card" >
								<div class="mui-card-content card-content">
									<div class="userInfo">
										<div class="username">{{getName(OrderInfo.driver_list[OrderInfo.index][0].sex, OrderInfo.driver_list[OrderInfo.index][0].realname)}}</div>
										<div class="mobile" @click="dial(OrderInfo.driver_list[OrderInfo.index][0].mobile)">{{OrderInfo.driver_list[OrderInfo.index][0].mobile}}</div>
										<div class="change" @click="showDetailContent"><img src="../imgs/change.png" alt=""></div>
									</div>
									<div class="other" @click.stop="showContent">
										<div class="time">
											<img src="../imgs/clock.png" class="route-img" alt="" style="width: 1.5rem;height: 1.5rem;">
											<span class="word">{{getTime(OrderInfo.driver_list[OrderInfo.index][0].depart_time)}} ~ {{getTime(OrderInfo.record_list[OrderInfo.index][0].arrive_time)}}</span>
										</div>
										<div class="serviceInfo">
											<img src="../imgs/star.png" alt="" style="margin:auto;margin-left: 0;margin-right: 0;">
											<span class="rateNum">{{OrderInfo.driver_list[OrderInfo.index][0].service_grade}}</span>
											<span class="totalOrder">{{OrderInfo.driver_list[OrderInfo.index][0].total_service}}单</span>
										</div>
										<!-- <div class="person">
											<img src="../imgs/user/person.png" class="route-img" alt="">
											<span class="word">{{OrderInfo.record_list[OrderInfo.index][0].person}}人</span>
										</div> -->
									</div>
									<div class="routeInfo">
										<div class="route-item" @click.stop="showContent">
											<div class="title">
												<img src="../imgs/user/circle1.png" class="route-img" alt="" style="height: 1.4rem;width: 1.4rem;">
												<span class="word">车牌</span>
											</div>
											<div class="route-content">
												{{OrderInfo.driver_list[OrderInfo.index][0].plate_num}}
											</div>
										</div>
										<div class="route-item">
											<div class="title">
												<img src="../imgs/user/circle2.png" class="route-img" alt="" style="width: 1.5rem;height: 1.5rem;">
												<span class="word">车型</span>
											</div>
											<div class="route-content">
												{{OrderInfo.driver_list[OrderInfo.index][0].color}}
												{{OrderInfo.driver_list[OrderInfo.index][0].car_brand}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-card routeInfo_card_detail" v-show="showDetail">
						<div class="card-header">
							<div class="header_change" @click="showDetailContent"><img src="../imgs/change.png" alt=""></div>
						</div>
						<div class="mui-card-content routes_detail route_detail" id="route_detail" >
						</div>
					</div>
				</div>
			</div>
			<ul class="bottom-btn" v-if="!complete">
				<li class='btn-word' @click="departRoute()">确认上车</li>
				<li class="one"><img src="../imgs/1.png" alt=""></li>
				<li class="two"><img src="../imgs/2.png" alt=""></li>
			</ul>
			<!--司机评价框-->
			<el-dialog
			  title="提示"
			  :visible.sync="centerDialogVisible"
			  width="90%"
			  center
			  top="50%"
			>
				<div style="display: flex;">
					<div style="margin: auto;">
						<div class="rate-tips">给司机评分</div>
						<el-rate
							v-model="rate"
							:colors="colors"
							allow-half=true
							show-text
							>
						</el-rate>
					</div>
				</div>
				<div style="margin-top: 1rem;">
					<el-checkbox-group 
					  v-model="driverRate" 
					  size=small 
					  @change="test"
					  >
					  <el-checkbox-button v-for="(item,index) in options" :label="index" >{{item}}</el-checkbox-button>
					</el-checkbox-group>
				</div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="evaluateDriver">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</body>
</html>


<script type="text/javascript">
	mui.plusReady(function(){
		
	})
	
	var VueObject = new Vue({
		el: '#vuemain',
		data: function() {
			return {
				RouteInfo: {
					routeInfo: [],
					routeLine: [],
					trip_id: 0,
					driver_commute_id: 0,
					distance: 0,
				},
				OrderInfo:{
					record_list: [],
					driver_list: [],
					index: 0,
					originData: []
				},
				bookOrder: true,
				showLast: false,
				showNext: false,
				showDetail: false,
				complete: false,
				centerDialogVisible: false,
				rate: 3.8,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				options: ['车内整洁', '驾驶平稳', '准时到达', '认路准确'],
				driverRate: [],
			}
		},
		updated: function() {
			 var sliderMuiObj = mui(".mui-slider");//滑动科目 
				sliderMuiObj.slider({
					interval: 0  //如果你想自动3000ms滑动一下就写上这个。
				});
		},
		methods: {
			test(){
				console.log(this.driverRate)
			},
			showContent() {
				$(".route_info").slideToggle()
                $('.showBtn').show()
			},
			showDetailContent() {
				this.showDetail = !this.showDetail
			},
			getName(sex,name){
				if(sex == 1){
					return name.slice(0,1) + '先生'
				}else{
					return name.slice(0,1) + '女士'
				}
			},
			getTime(time){
				return time.slice(0,5)
			},
			itemSlide(e){
				var index = e.detail.slideNumber
				this.drawLine(index)
			},
			drawLine(index){
				//绘制窗口信息
				var opts = {
				  width : 150,     // 信息窗口宽度
				  height: 30,     // 信息窗口高度
				  title :  "途经点", // 信息窗口标题
				  enableMessage:true,//设置允许信息窗发送短息
				  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
				}

				if(this.bookOrder){
					var startPoint = new BMap.Point(this.RouteInfo.routeInfo[index].origin_longitude, this.RouteInfo.routeInfo[index].origin_latitude)
					var endPoint = new BMap.Point(this.RouteInfo.routeInfo[index].destination_longitude, this.RouteInfo.routeInfo[index].destination_latitude)
					// 创建信息窗口对象 
					var infoWindow_start = new BMap.InfoWindow(this.RouteInfo.routeInfo[index].origin, opts);  
				}else{
					var item_index = this.OrderInfo.index
					
					var startPoint = new BMap.Point(this.OrderInfo.record_list[item_index][index].origin_longitude, this.OrderInfo.record_list[item_index][index].origin_latitude)
					var endPoint = new BMap.Point(this.OrderInfo.record_list[item_index][index].destination_longitude, this.OrderInfo.record_list[item_index][index].destination_latitude)
					// 创建信息窗口对象 
					var infoWindow_start = new BMap.InfoWindow(this.OrderInfo.record_list[item_index][index].origin, opts)
				}
				
				map.openInfoWindow(infoWindow_start, startPoint); //开启信息窗口
				plus.nativeUI.closeWaiting()
				//渲染当前路线,延时太长,暂不考虑
				/*var LineIndex = 2*index + 1
				 this.routeLine[LineIndex].getPolyline().setStrokeColor('red')
				this.routeLine[LineIndex].getPolyline().setStrokeOpacity(0.8) */
			},
			goLast() {
				//上一页
				removeMarker()
				this.OrderInfo.index -= 1
				if(this.OrderInfo.index == 0){
					this.showLast = false
				}
				if(this.OrderInfo.record_list.length > 1){
					this.showNext = true
				}
				drawRoute(this.OrderInfo.originData[this.OrderInfo.index])
			},
			goNext() {
				//下一页
				removeMarker()
				this.OrderInfo.index += 1;
				if(this.OrderInfo.index + 1 == this.OrderInfo.record_list.length){
					this.showNext = false
				}
				this.showLast = true
				drawRoute(this.OrderInfo.originData[this.OrderInfo.index])
			},
			evaluateDriver() {
				//评价司机
				this.centerDialogVisible = false;
				axios.get(baseURL + '/evaluateDriver',{params: {rate: this.rate, record_id: this.OrderInfo.record_list[VueObject.OrderInfo.index][0].record_id}}).then(res => {
					if(res.data.status == 10000){
						mui.toast(res.data.message)
					}
				})
			},
			dial(mobile){
				// 拨打电话
				var btnArray = ['否', '是'];
				mui.confirm('是否拨打电话?','通知',btnArray,function(e){
					if (e.index == 1) {
						//跳转到行驶路线页
						plus.device.dial( mobile, true );
					}
				})
			}
		}
	})


	//与滑动产生冲突
	/*var $selector = $('.clickListener');
	$selector.on('touchstart touchmove touchend', function(event) {
    switch(event.type) {
        case 'touchstart':
            falg = false;
            break;
        case 'touchmove':
            falg = true;
             break;
        case 'touchend':
            if( !falg ) {
                $(".route_info").slideToggle()
                $('.showBtn').show()
                console.log('点击')
            } else {
                console.log('滑动');
            }
            break;
    	}
	});*/
	
	
	$(document).ready(function(){
		$(".showBtn").click(function(){
			$(".route_info").slideToggle()
			$(this).hide()
		})
	});
	
	
	//仅供测试使用
	//LoadOrderDetail([18])

	document.addEventListener('LoadOrderDetail', function(event){
		console.log('进入预加载事件')
		//加载订单信息
		var record_list = event.detail.list
		VueObject.complete = event.detail.complete
		plus.nativeUI.showWaiting('加载中...', {
			width: '100px',
			height: '100px'
		})
		LoadOrderDetail(record_list)
	})
	
	function LoadOrderDetail(record_list){
		axios.get(baseURL + '/getOrderDetail',{params: {record_ids: record_list}})
			.then(res => {
				//保留原始信息
				VueObject.OrderInfo.originData = res.data
				var record_list = []
				var driver_list = []
				//渲染当前用户线路和顺路线路
				for(var i = 0; i< res.data.length; i++){
					var tmp = []
					tmp.push(res.data[i].currentInfo)
					record_list.push(tmp)
					driver_list.push(res.data[i].driverRoute)
				}
				VueObject.OrderInfo.record_list = record_list
				VueObject.OrderInfo.driver_list = driver_list
				VueObject.OrderInfo.index = 0
				VueObject.bookOrder = false
				if(res.data.length > 1){
					VueObject.showNext = true
				}
				getLocation(res.data[0])
			})
	}
	
	//全局map对象
	var map = null
	//全局Point对象
	var myPoint = null
	
	//获取定位
	function getLocation(res){
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
				myPoint = r.point
				initMap(r.point, res)
			}
			else {
				alert('failed'+this.getStatus());
			}        
		});
	}
	
	//初始化百度地图
	function initMap(gpspoint, res) {
		map = new BMap.Map("container");
		//地图控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.OverviewMapControl());
		map.centerAndZoom(gpspoint, 15);
		//标注当前位置
		map.addOverlay(new BMap.Marker(gpspoint));
		//加载附近
		drawRoute(res)
	}
	
	
	//渲染出行路线
	//乘客端, 路线为 司机起点 < ----- > 用户终点
	function drawRoute(res){
		var driverRoute = res.driverRoute[0] 	//司机路线信息
		var hitchInfo = res.hitchInfo		//其他顺路的用户路线
		var currentInfo = res.currentInfo	//当前用户发布的路线

		var driver_start = new BMap.Point(driverRoute.origin_longitude, driverRoute.origin_latitude)
		var driver_end = new BMap.Point(driverRoute.destination_longitude, driverRoute.destination_latitude)
		
		//只显示 司机起点 < ----- > 用户终点 部分
		var hitchPoint = []
		var current_start = new BMap.Point(currentInfo.origin_longitude, currentInfo.origin_latitude)
		var current_end = new BMap.Point(currentInfo.destination_longitude, currentInfo.destination_latitude)
		hitchPoint.push(current_start)
		/* hitchPoint.push(current_end) */
		
		/* for(var i=0; i<hitchInfo.length; i++){
			var temPoint_start = new BMap.Point(hitchInfo[i].origin_longitude, hitchInfo[i].origin_latitude)
			var temPoint_end = new BMap.Point(hitchInfo[i].destination_longitude, hitchInfo[i].destination_latitude)
			hitchPoint.push(temPoint_start)
			hitchPoint.push(temPoint_end)
		} */
		
		//只显示 司机起点 < ----- > 用户终点 部分
		var driving = new BMap.DrivingRoute(
			map, {
				renderOptions:{map: map, panel: "route_detail", autoViewport: true},
				onSearchComplete: ComputedDistance
			})
		driving.search(driver_start, current_end,{waypoints: hitchPoint});//waypoints表示途经点
		
		//添加路线后的回调函数
		driving.setPolylinesSetCallback(function(routes){
			/*此routeLine是表示当前路线,当初的设计是想滑动后路线高亮,延时太长,暂不考虑*/
			//VueObject.RouteInfo.routeLine = routes

			VueObject.drawLine(0)
			//plus.nativeUI.closeWaiting()
		})
		
	}

	//清空地图上的所有Marker
	function removeMarker() {
		map.clearOverlays()
	}
	
	//计算行驶距离
	function ComputedDistance(results){
		var plan = results.getPlan(0)
		var distance = plan.getDistance(false)/1000
		VueObject.RouteInfo.distance = distance;
	}
	
	//确定上车
	let isClick = true
	var btnArray = ['否', '是'];
	function departRoute(){
		VueObject.complete = true
		var record_id = VueObject.OrderInfo.record_list[VueObject.OrderInfo.index][0].record_id
		var rate = VueObject.rate
		if(isClick){
			isClick = false
			mui.confirm('确定上车后将关闭订单,是否继续?','通知',btnArray,function(e){
				if (e.index == 1) {
					//发送请求,完成订单
					axios.get(baseURL + '/finishOrder',{params: {record_id: record_id}}).then(res => {
						if(res.data.status = 10000){
							mui.toast(res.data.message)
							VueObject.complete = true
							VueObject.centerDialogVisible = true
						}
					})
				}else{
					isClick = true
					VueObject.complete = false
				}
			})
		}else{
			return
		}
	}
	
</script>